<!-- 
	<uv-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSexSelect">
				<uv-input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none">
				</uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item> -->
<template>
	<view>
		<uv-form labelPosition="left" :model="model1" :rules="rules" ref="form">
			<uv-form-item label="姓名" prop="userInfo.name" borderBottom>
				<uv-input v-model="model1.userInfo.name" border="none">
				</uv-input>
			</uv-form-item>



			<uv-form-item label="电站" prop="userInfo.powerstationId" borderBottom>
				<CustomPicker :options="stationOption" v-model="model1.userInfo.powerstationId" rangeKey="name"
					rangeValue="id" :value="model1.userInfo.powerstationId" @change="stationChange">
					<view class="flex flex-end">
						<uv-icon name="arrow-right" color="#606266"></uv-icon>
					</view>
				</CustomPicker>

			</uv-form-item>
			<uv-form-item label="日期" prop="userInfo.startTime" borderBottom @click="showDateSelect">

				<uv-datetime-picker ref="datetimePicker" :formatter="formatter" v-model="model1.userInfo.startTime"
					mode="datetime" @confirm="dateConfirm">
				</uv-datetime-picker>
				<view>{{model1.userInfo.startTime}}</view>

			</uv-form-item>



			<uv-button type="primary" text="提交" customStyle="margin-top: 10px" @click="submit"></uv-button>
			<uv-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></uv-button>
		</uv-form>
		<uv-action-sheet ref="sexSelect" :actions="actions" title="请选择性别" description="如果选择保密会报错" @select="sexSelect1">
		</uv-action-sheet>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import CustomPicker from "@/components/cus-picker/CusPicker"
	import {
		formatDateTime
	} from '@/utils/util'

	const form = ref(null); // 引用表单组件
	const sexSelect = ref(null); // 引用性别选择组件
	const datetimePicker = ref(null)
	const model1 = reactive({
		userInfo: {
			name: 'uv-ui',
			startTime: '2025-02-09 11:18:42'
			// sex: '',
		},
	});


	const actions = [{
			name: '男'
		},
		{
			name: '女'
		},
		{
			name: '保密'
		},
	];
	const stationOption = [{
			id: 1,
			name: '电站1'
		},
		{
			id: 2,
			name: '电站2'
		},
	]

	const rules = {
		'userInfo.name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		// 'userInfo.sex': {


		// 	required: true,
		// 	message: '请选择男或女',
		// 	trigger: ['blur', 'change'],
		// },
		'userInfo.powerstationId': [{
			type: 'number',
			required: true,
			message: '请选择',
			trigger: ['blur'],
		}, ]
	};
	const formatter = (type, value) => {

		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		return value
	}
	const showDateSelect = () => {
		datetimePicker.value.open()
	}
	const dateConfirm = async (e) => {
		console.log('confirm', e);
		let time = await formatDateTime(e.value)

		model1.userInfo.startTime = time

		console.log('表单项==', model1.userInfo.startTime);
	}
	const stationChange = (value) => {
		console.log("电站更换", value)
		model1.userInfo.powerstationId = value

		// 对部分表单字段进行校验
		// checkItem()

	}
	const checkItem = () => {
		form.value.validateField('userInfo.powerstationId', (err) => {
			if (err) {
				console.log("电站校验失败", err);
				return
			} else {
				console.log("电站校验通过");
			}
		});
	}

	// 提交表单
	const submit = () => {
		console.log("提交表单", model1)
		form.value.validate().then(() => {
			uni.showModal({
				icon: 'success',
				title: '校验通过',
			});
		}).catch((err) => {
			uni.showModal({
				icon: 'error',
				title: '校验失败',
			});
		});


	};

	// 重置表单
	const reset = () => {
		form.value.resetFields();
		form.value.clearValidate();
	};

	// 显示性别选择
	const showSexSelect = () => {
		sexSelect.value.open();
		hideKeyboard();
	};

	// 处理性别选择结果
	const sexSelect1 = (e) => {
		model1.userInfo.sex = e.name;
		form.value.validateField('userInfo.sex', (err) => {
			// 处理错误后的逻辑
		});
	};

	// 隐藏键盘
	const hideKeyboard = () => {
		uni.hideKeyboard();
	};
</script>